.content {
    display: grid;
    grid-template-rows: 25px;
    min-height: 100%;
}

.container {
    margin: 0;
    width: 100%;
}

html, body {
    height: 100%;
}

#body {
    height: 90%;
    width: 100%;
    padding: 0;
}

.editor {
    width: 100%;
    height: 100%;
    position: relative;
}

.toolbar-btn {
    float: right;
}

.output, .preview {
    padding: 0 5px;
    font-family: Monaco, monospace;
    font-size: 14px;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
}

.preview {
    min-height: 75px;
}

.navbar {
    margin-bottom: 0
}

.output-wrapper {
    height: 100%;
    position: relative;
    width: 100%;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    background: white;
}

.output-warning {
    padding-left: 5px;
    font-family: Monaco, monospace;
    font-size: 14px;
    background: yellow;
}

.console-wrapper {
    left: 0;
    right: 1em;
    /*border-top: solid medium black;*/
}

.font-bold {
    font-weight: bold;
}

.diagram-header {
    padding-right: 10px;
    background: white;
    height: 2rem;
    font-size: 0.875rem;
}

.header-checkbox {
    display: flex;
    height: 2rem;
    align-items: center;
}

#documentation-search {
    padding-right: 15px;
}

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}

.fas {
    pointer-events: none;
}

.lm_active .messageCounter {
    background: #ee7813;
}

button {
    border-style: solid;
    border-width: 1px;
    padding: 1px 7px 2px;
    color: buttontext;
}

.ace_editor .ace_marker-layer .ace_bracket {
    display: none;
}

.ace_editor .ace_marker-layer .match_parens {
    background: #76ffb6 !important; /* I hate CSS */
}